import React, { Component } from 'react';
import { 
  Form,
  Input,
  Button,
  DatePicker
} from "antd";
import moment from 'moment';
const FormItem = Form.Item;

class TodoForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      const { handleOk, editData } = this.props;
      this.setState({
        loading: true
      })
      if (!err) {
        if (editData && editData.id) values.id = editData.id;
        if (editData && editData.status) values.status = editData.status;
        
        handleOk(values, () => {
          this.setState({
            loading: false
          })
        });
      }
    })
  }

  render() {

    const { getFieldDecorator } = this.props.form;
    const { editData } = this.props;
    const { loading } = this.state;
    
    return(
      <Form
        onSubmit={this.handleSubmit}
      >
        <FormItem
          label="标题"
        >
          {
            getFieldDecorator('title', {
              initialValue: editData && editData.title,
              rules: [{required: true, message: '请输入标题'}]
            })(
              <Input />
            )
          }
        </FormItem>
        <FormItem
          label="内容"
        >
          {
            getFieldDecorator('content', {
              initialValue: editData && editData.content,
              rules: [{required: false, message: '请输入内容'}]
            })(
              <Input />
            )
          }
        </FormItem>
        <FormItem
          label="完成时间"
        >
          {
            getFieldDecorator('time', {
              initialValue: editData && moment(editData.time, 'YYYY/MM/DD'),
              rules: [{required: true, message: '请选择完成时间'}]
            })(
              <DatePicker />
            )
          }
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            htmlType="submit"
            loading={loading}
            style={{float: 'right'}}
          >
            提交
          </Button>
        </FormItem>
      </Form>
    )
  }
}

const WrapperTodoForm = Form.create()(TodoForm)

export default WrapperTodoForm;